<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>宝贝投-P2P平台</title>
		<!-- links begin -->
		<link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" href="js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
		<link rel="stylesheet" href="css/core.css" type="text/css" />
		<script type="text/javascript" src="js/jquery/jquery-2.1.3.js"></script>
		<script type="text/javascript" src="js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
		<script type="text/javascript" src="js/jquery.bootstrap.js"></script>
		<!-- links end -->
		<link rel="stylesheet" type="text/css" href="js/plugins/flipcountdown/jquery.flipcountdown.css" />
		<script type="text/javascript" src="js/plugins/flipcountdown/jquery.flipcountdown.js"></script>
		<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
		<script type="text/javascript" src="js/plugins/jquery-validation/jquery.validate.js"></script>

		<script type="text/javascript" src="js/common.js"></script>

		<style type="text/css">
			.el-userhead{
				width: 100px;
				height: 100px;
				display: block;
				margin: 0px auto;

			}
			.muted{
				color: #999;
			}
			.text-info{
				color: #09d;
			}
		</style>
	</head>
	<body>
		<!-- 网页顶部 begin -->
		<div class="el-header"></div>
		<!-- 网页顶部 end -->

		<!-- 网页导航 begin -->
		<div class="el-navbar navbar navbar-default"></div>
		<!-- 网页导航 end -->

		<div class="container" style="margin-top: 10px;">

			<div class="row">
				<div class="col-sm-2"></div>
				<div class="col-sm-6">
					<h3 class="text-info" style="margin-top: 0px;">
						<span id="title">加载中...</span>
						<small><label class="label label-primary">信</label></small>
					</h3>
					<div>
						<table width="100%" height="250px">
							<tr>
								<td class="muted">借款人</td>
								<td class="text-info" style="padding-left: 10px;" colspan="3">
									<span id="borrowUsername">加载中...</span>
								</td>
							</tr>
							<tr>
								<td class="muted" width="80px">借款金额</td>
								<td class="text-info" width="120px" style="padding-left: 10px;">
									<span id="borrowAmount">加载中...</span>
								</td>
								<td class="muted" width="80px">年化利率</td>
								<td class="text-info" style="padding-left: 10px;">
									<span id="yearRate">加载中...</span>
								</td>
							</tr>
							<tr>
								<td class="muted ">借款期限</td>
								<td class="text-info" style="padding-left: 10px;">
									<span id="repaymentMonth">加载中...</span>
								</td>
								<td class="muted">总利息</td>
								<td class="text-info" style="padding-left: 10px;">
									<span id="totalInterest">加载中...</span>
								</td>
							</tr>
							<tr>
								<td class="muted">还款方式</td>
								<td class="text-info" style="padding-left: 10px;">
									<span id="repaymentType">加载中...</span>
								</td>
								<td class="muted">最小投标</td>
								<td class="text-info" style="padding-left: 10px;">
									50元
								</td>
							</tr>
							<tr>
								<td class="muted">剩余时间</td>
								<td class="text-info" style="padding-left: 10px;" colspan="3">
									<div id="bidDeadline"></div>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<div class="col-sm-3">
					<table style="height:110px; width:230px;">
						<tr>
							<td class="muted">投标总数</td><td class="text-info" style="padding-left: 10px;">
							<span id="bidNum">加载中...</span>
						</td>
						</tr>
						<tr>
							<td class="muted">还需金额</td>
							<td class="text-info" style="padding-left: 10px;">
							<span id="lastAmount">加载中...</span>
							</td>
						</tr>
						<tr>
							<td  class="muted">投标进度</td>
							<td class="text-info" style="padding-left: 10px;">
								<span id="bidPercent">加载中...</span>
							</td>
						</tr>
						<tr>
							<td colspan="2">
								<div style="margin-bottom: 10px;" class="progress">
									<div id="bidProgress" style="width: 0%;" class="progress-bar progress-bar-info progress-bar-striped"></div>
								</div>
							</td>
						</tr>
					</table>
						<h4 id="borrowState" class="text-primary" style="display: none;">加载中...</h4>
						<a id="btnLogin" class="btn btn-danger btn-block" style="font-size: 18px; display: none;" href="javascript:void(0);">
							登录投标
						</a>
						<!-- 投资面板 Begin -->
						<form id="editForm" action="http://localhost:8080/finance/bid/add" method="post" style="display: none;">
							<div class="form-group">
								<input class="form-control input-sm" id="showBidAmount" name="showBidAmount" autocomplete="off" placeholder="请输入投标金额" />
							</div>
							<div class="form-group">
								<input type="hidden" id="bidUserId" name="bidUserId" value="" />
								<input type="hidden" id="bidUsername" name="bidUsername" value="" />
								<input type="hidden" id="borrowId" name="borrowId" value="" />
								<input type="hidden" id="bidAmount" name="bidAmount" value="" />
								<button id="bidBtn" class="btn btn-danger btn-block">
									马上投标
								</button>
							</div>

						</form>
						<!-- 投资面板 End -->

				</div>
			</div>

			<div class="panel panel-default">
				<div class="panel-heading">
					借款人信息
				</div>
				<div class="panel-body">
					<table>
						<tbody>
						<tr>
							<td class="muted text-right" width="140px;">真实姓名</td>
							<td width="150px;" style="padding-left: 10px;" class="text-info">
								<span id="realname">加载中...</span>
							</td>
							<td class="muted text-right" width="140px;">身份证号码</td>
							<td width="150px;" style="padding-left: 10px;" class="text-info">
								<span id="idCardNumber">加载中...</span>
							</td>
							<td class="muted text-right" width="140px;">注册时间</td>
							<td width="150px;" style="padding-left: 10px;" class="text-info">
								<span id="createTime">加载中...</span>
							</td>
						</tr>
						<tr>

							<td class="muted text-right" width="140px;">文化程度</td>
							<td width="150px;" style="padding-left: 10px;" class="text-info">
								<span id="eduBackgroundId">加载中...</span>
							</td>
							<td class="muted text-right" width="140px;">住房条件</td>
							<td width="150px;" style="padding-left: 10px;" class="text-info">
								<span id="houseConditionId">加载中...</span>
							</td>
							<td class="muted text-right">年收入</td>
							<td style="padding-left: 10px;" class="text-info">
								<span id="incomingLevelId">加载中...</span>
							</td>
						</tr>
						</tbody>
					</table>
				</div>
			</div>

			<!-- 还款记录面板 begin -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<div style="font-size: 16px;">还款记录</div>
				</div>
				<div class="panel-body">
					<table id="tblRepayment" class="table table-striped">
						<thead>
						<tr>
							<th>还款时间</th>
							<th>还款期数</th>
							<th>还款金额</th>
							<th>还款状态</th>
						</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
			<!-- 还款记录面板 end -->

			<!-- 投资记录面板 begin -->
			<div class="panel panel-default">
				<div class="panel-heading">
					<div style="font-size: 16px;">投标记录</div>
				</div>
				<div class="panel-body">
					<table id="tblBid" class="table table-striped">
						<thead>
						<tr>
							<th>投标人</th>
							<th>投标金额</th>
							<th>投标时间</th>
						</tr>
						</thead>
						<tbody></tbody>
					</table>
				</div>
			</div>
			<!-- 投资记录面板 end -->
		</div>

		<!-- 页脚 begin -->
		<div class="container-foot-2"></div>
		<!-- 页脚 end -->
	</body>
<script type="text/javascript">

// '数据字典项'集合
let systemDictionaryItemList = new Array();

// 当前借款信息id
let borrowId = GetQueryString('id');

// 当前借款人id
let borrowUserId = '';

// 当前借款标状态
let borrowState = 0;

// 当前借款还需金额
let lastAmount = 0;

// 当前登录用户
let user;

//  当前用户钱包信息
let userWallet;

$(function(){

    // 加载公共顶部模板
    $('.el-header').load('tpl-head.html');

    // 加载网站导航栏模板
    $('.el-navbar').load('tpl-navbar.html');

    // 加载左侧菜单栏模板
    $('.el-leftmenu').load('tpl-leftmenu.html');

    // 加载页脚模板
    $('.container-foot-2').load('tpl-footer.html');

    // '登录投标'按钮事件
    $('#btnLogin').click(function () {

        // 确保用户登录之后，可以回到该投资页面进行投资操作
        window.location.href = 'login.html?redirectUrl=borrow-info.html?id=' + borrowId;

    });// $('#btnLogin').click();


    // 加载'数据字典项列表'
    loadingSystemDictionaryItemList();

    // 加载'借款信息'数据
    loadingBorrow();

    // 加载'借款人信息'
    loadingBorrowUserInfo();

    // 加载'借款人钱包信息'
	loadingUserWallet();

	// 加载'还款列表'
	loadingRepayment();

	// 加载'投标列表'
	loadingBid();

});// $(function());

/** 加载'数据字典项列表' **/
function loadingSystemDictionaryItemList(){

    // 加载'数据字典'数据
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/system/dictionaryItem/getAll',
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }

            // 如果返回的数据响应码为200
            // 将'数据字典项'集合放入全局变量中
            systemDictionaryItemList = result.data;

        }// success(result);

    });// $.ajax();

}// loadingSystemDictionaryItemList();

/** 加载'借款信息'数据 **/
function loadingBorrow() {

    // 加载借款信息
    $.ajax({
        type: 'GET',
        async: false,
        url: 'http://localhost:8080/finance/borrow/get/' + borrowId,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            let borrow = result.data;

            // 设置当前借款人id
            borrowUserId = borrow.borrowUserId;

            // 设置当前借款状态
			borrowState = borrow.borrowState;

            // 填充'借款信息'
            $('#title').text(borrow.title);
            $('#borrowUsername').text(borrow.borrowUsername);
            $('#borrowAmount').text(borrow.borrowAmount / MONEY_UNIT + '元');

            $('#yearRate').text(borrow.yearRate + '%');
            $('#repaymentMonth').text(borrow.repaymentMonth + '期');
            $('#repaymentType').text(REPAYMENT_TYPE[borrow.repaymentType]);
            $('#totalInterest').text(borrow.totalInterest / MONEY_UNIT + '元');

            // 投标总数
            $('#bidNum').text(borrow.bidNum);
            // 还需金额
            lastAmount = borrow.borrowAmount - borrow.currentBidAmount;
            $('#lastAmount').text( (lastAmount / MONEY_UNIT) + '元' );

            // 投标进度
			let bidPercent = (borrow.currentBidAmount / borrow.borrowAmount) * 100;
			$('#bidPercent').text( bidPercent + '%');
            $('#bidProgress').css('width', bidPercent + '%');

            // 借款状态
            $('#borrowState').text(BORROW_STATE[borrow.borrowState]);

            // 如果'借款审核状态'是'招标中'
            if( borrow.borrowState == BORROW_STATE_CONST.BIDDING ) {

                // 设置'截止日期'倒计时
                $('#bidDeadline').html('');
                $("#bidDeadline").flipcountdown({
                    size:'xs',
                    beforeDateTime: borrow.bidDeadline
                });

            }// if();

        }// success(result);

    });// $.ajax();

}// loadingBorrow();

/** 加载'借款人信息'数据 **/
function loadingBorrowUserInfo() {

    // 加载个人信息
    $.ajax({
        type: 'GET',
        url: 'http://localhost:8080/user/userinfo/get/' + borrowUserId,
        async: false,
        success: function (result) {

            // 如果返回的数据的响应码不是'成功(200)'
            if (result.code != 200) {
                $.messager.alert(result.msg);
                return;
            }


            // 如果返回的响应码正确，就进行数据填充
            let userInfo = result.data;

            // 填充'个人信息'
            $('#realname').text(userInfo.realname == '' ? '暂无' : userInfo.realname);
            $('#idCardNumber').text(userInfo.idCardNumber == '' ? '暂无' : userInfo.idCardNumber);
            $('#phoneNumber').text(userInfo.phoneNumber == '' ? '暂无' : userInfo.phoneNumber);
            $('#createTime').text(userInfo.registeredTime);

            $('#incomingLevelId').text(getDictionaryValue(userInfo.incomeLevelId));
            $('#eduBackgroundId').text(getDictionaryValue(userInfo.eduBackgroundId));
            $('#houseConditionId').text(getDictionaryValue(userInfo.houseConditionId));

        }// success(result);

    });// $.ajax();

}// loadingBorrowUserInfo();


/** 加载'用户钱包信息'数据 **/
function loadingUserWallet() {

    // 判断当前借款标状态是否处于'招标中'
    if( borrowState != BORROW_STATE_CONST.BIDDING) {
        // 如果借款状态不等于'招标中'，就无法进行'投标'操作，
        // 所以就只显示'借款标状态'
        $('#borrowState').show();
        return;

    }// if();

    // 判断当前用户是否已经登录
    let jsonUser = sessionStorage.getItem("user");
    // 如果用户没有登录
    if( !jsonUser ) {
        // 就显示'马上登录'按钮
        $('#btnLogin').show();
        return;
	}// if();

	// 如果用户已经登录，则解析出user对象，存储到全局user中
    user = JSON.parse(jsonUser);

    // 判断当前登录用户id和借款用户id是否相同
	if( user.id == borrowUserId ) {

	    // 就显示标的审核状态 (自己无法投资自己的借款标的)
		$('#borrowState').show();
		return;
	}// if();


	// 如果当前登录用户id和借款用户id是不同的，
	// 则表示可以进行投资

    // 加载账户钱包
    $.post('http://localhost:8080/user/wallet/get/' + user.id, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }


        // 如果返回的响应码正确，就进行数据填充
		// 将用户钱包信息存储到全局变量中
        userWallet = result.data;

        // 如果用户钱包可用余额低于'系统最小投资金额'
        if( userWallet.availableAmount < MINIMUM_BID_AMOUNT ) {

            $('#showBidAmount').attr({
                placeholder: '您的可用余额小于50元，无法进行标的投资！',
                readonly: true
            });

            $('#bidBtn').attr('disabled', 'disabled');

            return;
        }// if();


		// 如果用户钱包可用余额大于等于'系统最小投资金额'

        // 可投金额
		let canBidAmount = lastAmount;
        // 钱包可用余额
        let availableAmount = userWallet.availableAmount;

        // 如果'可投金额'大于'钱包可用余额'
        if( canBidAmount > userWallet.availableAmount ) {
            // 那么'可投金额'就等于'钱包可用余额'
			// 这样用于防止用户投资超额
        	canBidAmount = availableAmount;
		}

        $('#showBidAmount').attr('placeholder', '请输入投标金额，可投金额：' + (canBidAmount / MONEY_UNIT) + '元');


        // '投资'表单验证
        $("#editForm").validate({
            rules:{
                showBidAmount:{
                    required:true,
                    number:true,
                    max:canBidAmount / MONEY_UNIT,
                    min: 50,
                    integerMutiple: 50	// 50的整数倍
                }
            },
            messages:{
                showBidAmount:{
                    required:"请输入投资金额",
                    number:"请输入正确的投资金额",
                    max:"投资金额不能超过{0}元",
                    min:"投资金额必须大于{0}元",
                    integerMutiple: "投资金额必须是{0}的整数倍"
                }
            },
            //自定义错误样式
            errorClass:"text-danger",
            // 未通过验证,进行高亮处理或其他处理；
            highlight:function(input){
                $(input).closest(".form-group").addClass("has-error");
            },
            // 通过验证,清除高亮效果或其他处理；
            unhighlight:function(input){
                $(input).closest(".form-group").removeClass("has-error");
            },
            // 验证成功后，提交操作；
            submitHandler:function(form){

                // 格式化货币单位为：分
                // 投资金额
                let bidAmount = $('#showBidAmount').val();
                $('#bidAmount').val(bidAmount * MONEY_UNIT);

                // 投资人id
                $('#bidUserId').val(user.id);
                // 投资人用户名
				$('#bidUsername').val(user.username);
				// 借款id
				$('#borrowId').val(borrowId);


                // '投资表单', 进行Ajax异步提交
                $("#editForm").ajaxSubmit(function(result){

                    // 如果返回的数据的响应码不是'成功(200)'
                    if (result.code != 200) {
                        $.messager.alert(result.msg);
                        return;
                    }

                    // 如果返回的响应码为'成功(200)'
                    $.messager.confirm("提示","投标成功！",function(){
                        window.location.reload();
                    });

                });// $("#editForm").ajaxSubmit(function(data));

            }// submitHandler:function(form);
        });//  $("#editForm").validate();

        // 显示'投资'面板
        $('#editForm').show();


    });// $.post();


}// loadingUserWallet();

/** 加载'还款'数据 **/
function loadingRepayment(){

    // 加载'还款记录'数据
    $.post('http://localhost:8080/finance/repayment/getByBorrowId', {

        borrowId: borrowId

	}, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        fillRepaymentTable( result.data );

    });// $.post();

}// loadingRepayment();

/** 填充表格数据 **/
function fillRepaymentTable( listData ) {

    // 清空表格数据
    $('#tblRepayment tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblRepayment tbody').html('<tr><td colspan="4" align="center"><p class="text-danger">暂时没有还款记录</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let repayment = listData[i];

        // 还款金额
        let totalAmount = repayment.totalAmount / MONEY_UNIT;
        let tdTotalAmount = '<td class="text-primary">' + totalAmount + '元</td>';

        // 还款期数
        let tdPeriod = '<td>' + repayment.period + '期</td>';

        // 还款时间
        let tdRepaymentTime = '<td>' + repayment.repaymentTime + '</td>';

        // 还款状态
        let state = REPAYMENT_STATE[repayment.state];
        let tdState = '<td>' + state + '</td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblRepayment tbody').append('<tr>' + tdRepaymentTime + tdPeriod + tdTotalAmount + tdState + '</tr>');

    }// for();

}// fillRepaymentTable( listData );

/** 加载'投资'数据 **/
function loadingBid(){

    // 加载'充值记录'数据
    $.post('http://localhost:8080/finance/bid/getByBorrowId/' + borrowId, function (result) {

        // 如果返回的数据的响应码不是'成功(200)'
        if(result.code != 200) {
            $.messager.alert(result.msg);
            return;
        }

        // 如果返回的数据响应码为200
        // 就进行表格数据填充
        let listData = result.data;

        // 填充表格数据
        fillBidTable( listData );

    });// $.post();


}// loadingBid();

/** 填充表格数据 **/
function fillBidTable( listData ) {

    // 清空表格数据
    $('#tblBid tbody').empty();

    // 如果没有集合数据，就直接返回
    if( !listData || listData.length == 0 ){
        // 设置没有数据提示
        $('#tblBid tbody').html('<tr><td colspan="3" align="center"><p class="text-danger">暂时没有投标信息</p></td></tr>');
        return;
    }// if();

    // 循环构造单元格数据，并进行填充
    for( let i = 0; i < listData.length; i++ ) {

        let bid = listData[i];

        let tdBidUsername = '<td>' + bid.bidUsername + '</td>';

        // 投标金额
        let bidAmount = bid.bidAmount / MONEY_UNIT;
        let tdBidAmount = '<td>' + bidAmount + '元</td>';

        // 投标时间
        let tdBidTime = '<td>' + bid.bidTime + '</td>';

        // 将构造好的单元格数据，填充到表格中
        $('#tblBid tbody').append('<tr>' + tdBidUsername + tdBidAmount + tdBidTime + '</tr>');

    }// for();

}// fillBidTable( var listData );

/** 根据数据字典项id，获取数据字典值 **/
function getDictionaryValue( id ) {

    // console.log('itemId:' + id);

    // console.log('systemDictionaryItemList.length:' + systemDictionaryItemList.length);

    for( let i = 0; i < systemDictionaryItemList.length; i++ ) {

        let tmpSystemDictionaryItem = systemDictionaryItemList[i];

        if( tmpSystemDictionaryItem.id == id )
            return tmpSystemDictionaryItem.value;

    }// for( let i = 0; i < systemDictionaryItemList.length; i++ );

    return '暂无';

}// getDictionaryValue( id );
</script>
</html>
